
<template>
  <div v-if="id==null">请选择审核题库好来此页面</div>
  <div v-else>
    <el-main class="jt-body--full">
      <el-row :gutter="10" type="flex">
        <!-- 左边导航信息 -->
        <el-col :xs="10" :sm="7" :md="5" :lg="5" :xl="5">
          <div class="jt-card">
            <el-card class="jt-answer_card">
              <div class="jt-answer_card__header">
                <span></span>
                <div class="jt-answer_card__header__title">导航信息</div>
              </div>
              <div class="jt-answer_card__main">
                <div
                  class="jt-answer_card__main-item"
                  v-for="(item, index) in newData"
                  :key="index"
                >
                  <div class="jt-answer_card__main-item__title">
                    {{ item.type | shitiType }}
                    <p>
                      <span>简单:1</span>
                      <span>普通:2</span>
                      <span>困难:3</span>
                    </p>
                  </div>

                  <div class="jt-answer_card__main-item__split"></div>
                </div>
              </div>
              <div class="jt-answer_card__footer">
                <span class="jt-answer_card__footer-icon s4"></span>
                <span class="jt-answer_card__footer-label">简单</span>
                <span class="jt-answer_card__footer-icon s2"></span>
                <span class="jt-answer_card__footer-label">普通</span>
                <span class="jt-answer_card__footer-icon s5"></span>
                <span class="jt-answer_card__footer-label">困难</span>
              </div>
            </el-card>
          </div>
        </el-col>
        <!-- 题目 -->
        <el-col class="jt-do__right" :xs="15" :sm="17" :md="19" :lg="20" :xl="22">
          <div class="jt-list4_2">
            <!-- 单选题 -->
            <div class="jt-list4_2__main" v-for="(item,index) in newData" :key="index">
              <div class="jt-list4_2__main__title">
                <div class="jt-list4_2__main__title__header">
                  <span>{{index+1 | NoToChinese}}，</span>
                  <span>
                    {{item.type | shitiType}}(共 {{item.data.length}}题，每小题 {{item.score}} 分，合计{{item.data.length*item.score}}分
                    )
                  </span>
                </div>
              </div>
              <div class="jt-list4_2__main-item" v-for="(i,j) in item.data" :key="j">
                <div class="jt-do__right__left">
                  <div class="jt-list4_2__main__content">
                    <div class="jt-list4_2__main__content__header">
                      <span>{{j+1}}.</span>
                    </div>
                    <div v-html="i.title"></div>
                    <div class="jt-list4_2__main__content__footer">
                      <el-radio-group v-for="(m,n) in i.questionMap" :key="n">
                        <el-radio v-for="(b,q) in m" :key="q">{{b}}</el-radio>
                      </el-radio-group>
                      <p>
                        答案
                        <span>{{i.isAnswer}}</span>
                      </p>

                      <p v-if="item.type==97">
                        是否正确
                        <span>{{i.flag | sexs}}</span>
                      </p>
                      <p>
                        解析：
                        <span v-html="i.analysis"></span>
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <!-- 详情信息 -->
        <el-col :xs="5" :sm="3" :md="3" :lg="3" :xl="2">
          <div class="jt-time_progress_2">
            <div class="jt-time_progress_2__content">
              <ul>
                <li>
                  <div class="jt-time_progress_2__content-label">试卷名称</div>
                  <div class="jt-time_progress_2__content-data">{{ courseName }}</div>
                </li>

                <li>
                  <div class="jt-time_progress_2__content-label">试卷总分</div>
                  <div class="jt-time_progress_2__content-data">{{ scoreTotal }}</div>
                </li>
                <li>
                  <div class="jt-time_progress_2__content-label">考试时长</div>
                  <div class="jt-time_progress_2__content-data">{{ timeHours }}</div>
                </li>
              </ul>
            </div>
            <div class="jt-time_progress_2__opt">
              <div>
                <el-button type="primary" @click="changeOperationGroup('pass')">通过</el-button>
                <el-button @click="open()">不通过</el-button>
              </div>
            </div>
          </div>
        </el-col>
        <!-- 置顶 -->
      </el-row>
    </el-main>
  </div>
</template>
<script>
export default {
  watch: {
    "$route.query.id": {
      immediate: true, // 一开始的数据也要当做一种变化
      handler(val, old) {
        this.id = val;
        this.init();
      },
    },
  },
  data() {
    return {
      id: null,

    

      Paper: {},
      newData: [],

    
    
    };
  },
  methods: {
    init() {
      if (this.id != null) {
        this.$http({
          url: this.$http.adornUrl("/tiku/paper/gettemplates/" + this.id),
          method: "get",
        }).then(({ data }) => {
          this.Paper = data.paper;
          this.newData = data.data;
        });
      }
    },
  },
};
</script>
